<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>恂云的主页</title>
<meta name="description" content="恂云的主页，用于集中展示个人信息、作品成果，同时也是个人线上形象展示、信息传递的便捷入口，打造独特的个人线上名片。"/>
<meta name="keywords" content="恂云的主页,恂云,恂云的主页,恂云导航页,个人主页"/>
<meta name="author" content="恂云"/>
<meta name="founder" content="恂云"/>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.png">
<meta property="og:image" content="/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
    <div class="container">

        <div class="header">
            <img src="/tx.jpeg" alt="头像" class="avatar">
            <h1 class="name">恂云</h1>
            <p class="slogan">"欲买桂花同载酒 终不似 少年游"</p>
            
            <div class="info-section">
                <div class="info-item">
                    <i class="fas fa-map-marker-alt"></i>
                    广东
                </div>
                <div class="info-item">
                    <i class="fas fa-male"></i>
                    男
                </div>
                <div class="info-item">
                    <i class="fas fa-calendar-alt"></i>
                    22岁
                </div>
                <button class="theme-toggle" id="themeToggle">
                    <i class="fas fa-moon"></i> 黑夜
                </button>
            </div>
        </div>
        
        <div class="nav-section">
            <h2 class="section-title">我的站点</h2>
            
            <div class="nav-menu">
                <a href="https://xyttkx.cn" class="nav-item" target="_blank">博客</a>
                <a href="https://api.xyttkx.cn" class="nav-item" target="_blank">接口</a>
                <a href="https://img.xyttkx.cn" class="nav-item" target="_blank">压缩</a>
            </div>
        </div>
        
<div class="skills-section">
    <h2 class="section-title">我的技能</h2>
    
    <div class="skills-grid">
        <div class="skill-item">
            <div class="skill-header">
                <div class="skill-name">
                    <i class="fab fa-html5"></i> HTML
                </div>
                <span class="skill-percentage">85%</span>
            </div>
            <div class="skill-bar">
                <div class="skill-progress" data-percentage="85" style="background: linear-gradient(90deg, #e34f26, #f06529);"></div>
            </div>
        </div>
        
        <div class="skill-item">
            <div class="skill-header">
                <div class="skill-name">
                    <i class="fab fa-css3-alt"></i> CSS
                </div>
                <span class="skill-percentage">70%</span>
            </div>
            <div class="skill-bar">
                <div class="skill-progress" data-percentage="70" style="background: linear-gradient(90deg, #264de4, #2965f1);"></div>
            </div>
        </div>
        
        <div class="skill-item">
            <div class="skill-header">
                <div class="skill-name">
                    <i class="fab fa-js"></i> JavaScript
                </div>
                <span class="skill-percentage">65%</span>
            </div>
            <div class="skill-bar">
                <div class="skill-progress" data-percentage="65" style="background: linear-gradient(90deg, #f0db4f, #f7df1e);"></div>
            </div>
        </div>
        
        <div class="skill-item">
            <div class="skill-header">
                <div class="skill-name">
                    <i class="fab fa-php"></i> PHP
                </div>
                <span class="skill-percentage">75%</span>
            </div>
            <div class="skill-bar">
                <div class="skill-progress" data-percentage="75" style="background: linear-gradient(90deg, #777bb3, #8993be);"></div>
        </div>
        </div>
        
        <div class="skill-item">
            <div class="skill-header">
                <div class="skill-name">
                    <i class="fas fa-fish"></i> 摸鱼
                </div>
                <span class="skill-percentage">100%</span>
            </div>
            <div class="skill-bar">
                <div class="skill-progress" data-percentage="100" style="background: linear-gradient(90deg, #00FA9A, #00FF7F);"></div>
            </div>
        </div>
        
        <div class="skill-item">
            <div class="skill-header">
                <div class="skill-name">
                     <i class="fas fa-bed"></i> 摆烂
                </div>
                <span class="skill-percentage">80%</span>
            </div>
            <div class="skill-bar">
                <div class="skill-progress" data-percentage="80" style="background: linear-gradient(90deg, #7B68EE, #6A5ACD);"></div>
            </div>
        </div>
        </div>

</div>

        <div class="music-section">
            <div class="song-info">
                <div class="song-title">像我这样的人</div>
                <div class="song-artist">毛不易</div>
            </div>
            
            <div class="lyrics-container" id="lyricsContainer">
                
            </div>
            
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar" id="progressBar"></div>
            </div>
            
            <div class="player-controls">
                <span class="time-info" id="currentTime">00:00</span>
                <button class="play-btn" id="playBtn">
                    <i class="fas fa-play"></i>
                </button>
                <span class="time-info" id="totalTime">03:27</span>
            </div>
            
            <audio id="audioPlayer" src="/xwzydr.mp3"></audio>
      
        </div>
        
        <div class="quote-section">
            <p class="quote-text" id="quoteText">只要过的开心，就不算虚度光阴。</p>
            <p class="quote-author" id="quoteAuthor">—— 恂云</p>
        </div>
        <div class="footer-section">
            <p class="copyright">Copyright © 2025 恂云. All Rights Reserved.</p>
            <a href="https://beian.miit.gov.cn/" class="icp-number" target="_blank">这里填写你的备案号</a>
        </div>
    </div>
<script src="assets/script.js"></script>
</body>
</html>
